<template>
  <!--硅棒信息导入-->
  <div class="app-container">
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>导入时间</label>
     <!-- <el-date-picker type="datetime" v-model="date1"></el-date-picker>至<el-input type="date" v-model="searchList.date2"></el-input>-->
      <!-- <el-input type="date" v-model="date1"></el-input>至<el-input type="date" v-model="date2"></el-input> -->
      <el-date-picker
      class="date-picker-lee"
      v-model="value"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      placeholder="选择时间范围"
      default-time="['8:30:00', '08:29:00']">
    </el-date-picker>
      <el-button @click="searchRows"><i class="el-icon-search"></i>查询</el-button>
    </el-form>
    <el-button-group class="jc_btn_wrap jc_btn_left">
      <el-button @click="createRow"><i class="jc_icon el-icon-plus"></i>导入</el-button>
      <el-button @click="deleteRow"><i class=""></i>删除</el-button>
     <!-- <el-button @click=""><i class=""></i>导出</el-button>-->
      <el-button @click=""><i class=""></i>打印</el-button>
    </el-button-group>
    <el-table :data="list"  :height="tableHeight"  v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="80">
      </el-table-column>
      <el-table-column label='操作' width="80">
        <template scope="scope">
          <el-button type="text" @click="detailRow(scope.row)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label='文件名'>
        <template scope="scope">
          {{scope.row.filePath}}
        </template>
      </el-table-column>
      <el-table-column label='直径' width="150">
        <template scope="scope">
          {{scope.row.totalNorms}}
        </template>
      </el-table-column>
      <el-table-column label='单晶总长' width="150">
        <template scope="scope">
          {{scope.row.totalLength}}
        </template>
      </el-table-column>
      <el-table-column label='总箱数' width="80">
        <template scope="scope">
          {{scope.row.totalNo}}
        </template>
      </el-table-column>
      <el-table-column label='操作人'  width="80">
        <template scope="scope">
          {{scope.row.operateUser}}
        </template>
      </el-table-column>
      <el-table-column label='导入时间'>
        <template scope="scope">
          {{scope.row.operateDate}}
        </template>
      </el-table-column>
    </el-table>
    <!--<el-pagination layout="prev, pager, next" :total="total" @current-change="changePage" :page-size="10"/>-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="changePage"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--导入-->
    <el-dialog title="导入" :visible.sync="import_visible" class="jc_dialog_wrap">
      <el-form class="jc_search_wrap" enctype="multipart/form-data">
        <label>选择文件</label>
        <input type="file" multiple="multiple" id="file" :disabled="importInfo">
        <span>文件大小不可超过30M</span>
      </el-form>
      <p v-show='importInfo' style="color: red;font-size: 16px;text-align: center;">请稍定，正在请求文件</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitImportForm" :disabled="importInfo">确定</el-button>
        <el-button @click="import_visible=false">取消</el-button>
      </div>
    </el-dialog>
    <div class="el-loading-mask el-loading-fade-enter-to" v-loading.body="isShow" element-loading-text="请稍等，拼命加载中" v-show="isShow">
    </div>
    <!--错误提示框-->
    <el-dialog title="错误提示" :visible.sync="error_visible" class="jc_dialog_wrap">
      <el-form class="jc_search_wrap">
        <p style="text-align:center;margin: 10px 0;color: red;">{{errorInfoMsg}}</p>
        <div style="margin: 30px auto 20px auto;width: 180px;"><el-button @click="detailError">查看错误信息详情</el-button></div>
        <p v-show="pShow" style="color: red;">复制以下错误信息并发送至管理员</p>
        <p>{{errorMessage}}</p>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>

  import * as Silicon from "../../api/silicon_rod/silicon";
  var moment = require('moment');
  export default {
    components: {

    },
    data() {
      return {
        value:[],
        searchList: {
          pageSize: '',
        },
        list: null,
        total: 0,
        import_visible: false,
        detail_visible: false,
        edit_visible: false,
        form_create: {},
        form_detail: {},
        form_edit: {},
        multipleSelection: [],
        lmodel: '',
        date1: '',
        date2: '',
        importInfo: false,
        isShow: false,
        error_visible: false,
        errorInfo: {},
        errorMessage: '',
        errorInfoMsg: '',
        pShow: false,
        pageSize: 10,
        currentPage: 1,
      }

    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData(p=1) {

        this.date1 = moment(this.value[0]).format('YYYY-MM-DD')
        this.date2 = moment(this.value[1]).format('YYYY-MM-DD')

        console.log(this.date1,this.date2)

        this.listLoading = true;
        var params = this.searchList;
        params.pageNum = this.currentPage = p;
        params.pageSize = this.pageSize;
        Silicon.getList(params.pageSize,params.pageNum,this.date1,this.date2).then(data => {
          this.list = data.rows;
          this.total = parseInt(data.total);
          this.listLoading = false;
        })
        //接收导入失败后的错误提示信息
        this.errorInfo = this.$route.query.errorInfo;
        if(this.errorInfo!==undefined) {
          if(this.errorInfo.exception !== undefined){
           this.error_visible = true;
           this.errorInfoMsg = this.errorInfo.msg;
           }
        }

      },
      detailError() {
          this.pShow = true;
          this.errorMessage =  this.errorInfo.exception;
      },
      searchRows() {
        this.fetchData()
      },
      emptyInputs() {
        this.searchList = {};
        this.fetchData()
      },
      createRow() {
          this.import_visible = true;
          this.importInfo = false;
      },
      submitImportForm() {
        this.importInfo = true;
        $('#file').attr("disabled",true);
        //全部
        var file = $('#file')[0].files[0];
        var form = new FormData();
        form.append('file', file, file.name)

        Silicon.importExal(form,data=>{
          this.import_visible = false;
          //console.log(data.msg);
          this.$router.push({path: '/dialog/inforImport',query: {file: data.msg}})
        });
      },
      submitCreateForm() {
      },
      editRow() {
      },
      detailRow(row) {
        this.isShow= true;
        this.$router.push({path: '/dialog/inforDetail',query: {id: row.id}})
        /*Silicon.detailRow({id:row.id}).then(data => {
          this.isShow= false;
         this.$router.push({path: '/dialog/inforDetail',query: {file: data.msg,id: row.id}})
        })*/
      },
      deleteRow() {
        if(this.multipleSelection.length === 0) {
          alert('请先勾选行');
        }else if(this.multipleSelection.length >= 2) {
          alert('每次最多勾选一行');
        }else if(this.multipleSelection.length === 1){
          this.$confirm('确定提交该条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            Silicon.delRow(this.multipleSelection[0].id).then(data => {
              this.fetchData();
              this.$message({
                type: 'success',
                message: '提交成功!'
              });
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });
          });

        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      changePage(p) {
        this.fetchData(p)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.currentPage = 1;
        this.fetchData(1);

      },
    },
    computed: {
      tableHeight() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)
        return tableHeight;
      }
    }
  }
</script>
<style scoped>
.date-picker-lee{
  width:320px;
}
</style>
